<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RoleRealm - AI角色扮演平台</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'PingFang SC', 'Inter', sans-serif; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); min-height: 100vh; color: white; }
        .hero-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
        .logo { font-size: 64px; font-weight: bold; margin-bottom: 20px; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
        .tagline { font-size: 24px; margin-bottom: 40px; opacity: 0.9; max-width: 600px; line-height: 1.6; }
        .cta-buttons { display: flex; gap: 20px; margin-bottom: 60px; }
        .cta-btn { padding: 16px 32px; border: none; border-radius: 30px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; }
        .cta-btn.primary { background: #f59e0b; color: white; }
        .cta-btn.secondary { background: rgba(255, 255, 255, 0.1); color: white; border: 2px solid rgba(255, 255, 255, 0.3); }
        .features-section, .characters-preview { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px; margin: 40px 20px; max-width: 1000px; }
        .features-title, .characters-title { font-size: 32px; font-weight: bold; text-align: center; margin-bottom: 40px; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
        .feature-card { text-align: center; padding: 20px; }
        .feature-icon { font-size: 48px; margin-bottom: 20px; }
        .character-preview { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; text-align: center; transition: all 0.3s ease; cursor: pointer; }
        .character-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; margin: 0 auto 15px; }
        .footer { text-align: center; padding: 40px 20px; opacity: 0.7; }
        @media (max-width: 768px) { .logo { font-size: 48px; } .tagline { font-size: 20px; } .cta-buttons { flex-direction: column; align-items: center; } .cta-btn { width: 200px; } .features-section, .characters-preview { margin: 20px 10px; padding: 30px 20px; } }
    </style>
    <script src="/js/api.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body>
    <section class="hero-section">
        <h1 class="logo">RoleRealm</h1>
        <p class="tagline">与历史人物对话，体验沉浸式角色扮演<br>通过AI技术，与苏格拉底探讨哲学，与莎士比亚讨论文学，与爱因斯坦交流科学</p>
        <div class="cta-buttons">
            <a href="/login.html" class="cta-btn primary" id="startBtn">立即开始</a>
            <a href="#features" class="cta-btn secondary">了解更多</a>
        </div>
    </section>

    <section class="features-section" id="features">
        <h2 class="features-title">核心功能</h2>
        <div class="features-grid">
            <div class="feature-card"><div class="feature-icon">🎭</div><h3>AI角色扮演</h3><p>与历史人物、文学角色进行深度对话，体验真实的角色互动</p></div>
            <div class="feature-card"><div class="feature-icon">🎤</div><h3>语音对话</h3><p>支持语音输入和输出，提供更自然的对话体验</p></div>
            <div class="feature-card"><div class="feature-icon">📚</div><h3>知识问答</h3><p>从角色专业知识中学习，获得深度的知识交流</p></div>
            <div class="feature-card"><div class="feature-icon">🌍</div><h3>多语言支持</h3><p>支持中文、英文等多种语言，满足不同用户需求</p></div>
        </div>
    </section>

    <section class="characters-preview">
        <h2 class="characters-title">精选角色</h2>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px" id="previewGrid"></div>
    </section>

    <footer class="footer">
        <div>&copy; 2025 RoleRealm. All rights reserved.</div>
    </footer>

    <script>
      // If already logged in, start goes to character selection
      (function(){
        const start = document.getElementById('startBtn');
        if (ApiClient.getToken()) start.href = '/character-selection.html';
      })();

      (async function loadTrending(){
        try {
          const grid = document.getElementById('previewGrid');
          const data = await CharactersApi.trending().catch(() => ({ list: [] }));
          const list = data.list || [];
          grid.innerHTML = '';
          list.slice(0,6).forEach(c => {
            const el = document.createElement('div');
            el.className = 'character-preview';
            el.innerHTML = `<div class="character-avatar">${(c.name||'角')[0]}</div><h3 class="character-name" style="font-size:16px;font-weight:700;margin-bottom:8px">${c.name}</h3><p class="character-category" style="font-size:12px;opacity:.8">${c.category || ''}</p>`;
            el.addEventListener('click', () => { location.href = ApiClient.getToken() ? `/character-selection.html` : '/login.html'; });
            grid.appendChild(el);
          });
        } catch (e) {}
      })();
    </script>
</body>
</html>


